<template>
	<view class="message-list-page container">
		<view class="msg-box">
			<view class="msg-nomore" v-if="msgList.length===0">没有更多消息了</view>
			<!-- <view class="msg-nomore" v-else>下拉加载更多……</view> -->
			<view class="msg-list" v-for="item in msgList" :key="item.id">
				<view class="msg-time">{{$format(item.time,'MM-dd hh:mm')}}</view>
				<view class="msg-content left-content" v-if="item.type==='left'">
					<image class="msg-img" :src="$testImg" mode="aspectFill"></image>
					<view class="image-box" v-if="item.isImg">
						<!-- <image class="msg-content-img" :src="$resizeImg(item.imgUrl)" mode="widthFix"
							@click="$lookImage(0,[item.imgUrl])"></image> -->
					</view>
					<view class="msg-words" v-else>
						<view class="msg-words-bg">
							{{item.info}}
						</view>
					</view>

				</view>
				<view class="msg-content right-content" v-else>
					<view class="image-box" v-if="item.isImg">
						<!-- <image class="msg-content-img" :src="$resizeImg(item.imgUrl)" mode="widthFix"
							@click="$lookImage(0,[item.imgUrl])"></image> -->
					</view>
					<view class="msg-words" v-else>
						<view class="msg-words-bg">
							{{item.info}}
						</view>
					</view>
					<image class="msg-img" :src="$testImg" mode="aspectFill"></image>
				</view>

			</view>
		</view>
		<view></view>
		<view class="bottom-btnbox">
			<input class="msg-input" v-model="message" type="text" placeholder="请输入"
				placeholder-class="placeholder-style" :cursorSpacing="20">
			<text class="iconfont" v-if="message===''" @click="addImg">&#xe657;</text>
			<text class="save-btn yuan-btn btn-success" @click="addMsgList" v-else>发送</text>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { nextTick, onMounted, reactive, ref } from 'vue';
	import { chooseImage, format, getGuid, getStorage, hideLoading, showLoading, uploadFile } from '@/common/util';
	import config from '@/common/config';
	import { onLoad, onHide, onShow, onUnload,onPullDownRefresh } from "@dcloudio/uni-app"
	onPullDownRefresh(() => {
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 100);
	})
	const postMsgSend = async (content : string) => {
		try {
			// await msgApi.postMsgSend({
			// 	to: userId.value,
			// 	content
			// })
		} finally {

		}
	}
	const msgList = ref([])
	const addMsgList = async () => {
		await postMsgSend(message.value)
		msgList.value.push({
			time: format(new Date(), 'yyyy-MM-dd hh:mm'),
			type: 'right',
			info: message.value
		})
		message.value = ''
		setTimeout(() => {
			uni.pageScrollTo({
				duration: 10, // 毫秒
				scrollTop: 9999 // 位置
			})
		}, 100)
	}
	const addImg = () => {
		chooseImage(async (res) => {
			// showLoading()
			// const signRes = await commonApi.getUploadSign()
			// const key = format(new Date(), 'yyyy-MM-dd') + '/' + getGuid() + '.png'
			// await uploadFile(signRes, res.tempFilePaths + '', key)
			// await postMsgSend(signRes.host + '/' + key)
			// hideLoading()
			// msgList.value.push({
			// 	time: format(new Date(), 'yyyy-MM-dd hh:mm'),
			// 	type: 'right',
			// 	isImg: true,
			// 	imgUrl: res.tempFilePaths + ''
			// })
			// setTimeout(() => {
			// 	uni.pageScrollTo({
			// 		duration: 10, // 毫秒
			// 		scrollTop: 9999 // 位置
			// 	})
			// }, 100)
		})
	}
	const userId = ref('')
	onLoad((options) => {
		userId.value = options.to;
	})
	const message = ref('')
	const pageSize = 100
	const page = ref(1)
	const chatUser = ref({})
	let notMore = ref(false)
	const getMsgDetail = async () => {
		try {
			// const res = await msgApi.getMsgDetail({
			// 	userId: userId.value,
			// 	page: page.value,
			// 	pageSize
			// })
			// chatUser.value = res.chatUser
			// msgList.value = res.messages.map((item) => {
			// 	let type = ''
			// 	if (item.from === userId.value) {
			// 		type = 'left'
			// 	} else {
			// 		type = 'right'
			// 	}
			// 	if (item.content && item.content.indexOf(config.ossFileUrl) >= 0) {
			// 		// 图片
			// 		return { type, isImg: true, time: item.createdAt, imgUrl: item.content }
			// 	} else {
			// 		return { type, time: item.createdAt, info: item.content }
			// 	}
			// })
			// if (res.messages.length < pageSize) notMore.value = true
			//pageList.value = pageList.value.concat(res)
		} finally {
			//hideLoading()
		}
	}
	const myUserInfo = reactive(getStorage('userInfo') || {})
	let pageInterval = null
	onMounted(async () => {

	})
	onShow(async () => {
		showLoading()
		await getMsgDetail()
		nextTick(() => {
			setTimeout(() => {
				uni.pageScrollTo({
					duration: 10, // 毫秒
					scrollTop: 9999 // 位置
				})
			}, 100)
		})
		hideLoading()
		pageInterval = setInterval(() => {
			getMsgDetail()
		}, 30000)
	})
	onHide(() => {
		if (pageInterval) {
			clearInterval(pageInterval)
		}
	})
	onUnload(() => {
		if (pageInterval) {
			clearInterval(pageInterval)
		}
	})
	const jumpShowPage = (id) => {
		uni.navigateTo({
			url: '/pages/mine/showPage?id=' + id
		})
	}
</script>

<style lang="scss">
	.message-list-page {
		padding-bottom: 200rpx;

		.msg-box {
			padding: 15rpx 20rpx;
		}

		.msg-nomore {
			font-size: 24rpx;
			color: #999;
			text-align: center;
			padding: 8rpx 0;
		}

		.msg-list {
			margin-top: 30rpx;
		}

		.msg-time {
			font-size: 24rpx;
			color: #999;
			text-align: center;
			padding: 8rpx 0;
			margin-bottom: 30rpx;
		}

		.left-content {
			.msg-words-bg {
				background-color:#fcfcfc;
			}

			.msg-img {
				margin-right: 10rpx;
			}
		}

		.right-content {
			text-align: right;

			.msg-words-bg {
				background-color: #F9E50E;
			}

			.msg-img {
				margin-left: 10rpx;
			}

			.msg-words {
				text-align: right;
			}
		}

		.msg-img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 60rpx;
			background-color: #f6f6f6;
			display: inline-block;
			vertical-align: top;

		}

		.msg-words {
			font-size: 28rpx;
			color: #333;
			display: inline-block;
			width: 500rpx;

		}

		.msg-words-bg {
			display: inline-block;
			padding: 10rpx 15rpx;
			border-radius: 8rpx;
			line-height: 40rpx;
			text-align: left;
		}

		.image-box {
			display: inline-block;
		}

		.msg-content-img {
			width: 300rpx;
			border-radius: 8rpx;
		}

		.bottom-btnbox {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color:#fcfcfc;
			display: flex;
			align-items: center;
			box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.3);
			padding: 0 20rpx;
			justify-content: center;
			height: 130rpx;

			.iconfont {
				font-size: 55rpx;
				padding: 0 20rpx
			}
		}

		.msg-input {
			background-color: #f5f5f5;
			flex-grow: 1;
			padding: 15rpx 15rpx;
			border-radius: 8rpx;
			font-size: 30rpx;
		}

		.save-btn {
			padding: 10rpx 25rpx;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}
</style>